<script setup lang="ts">
import Carousel from '../components/Carousel.vue';
import Cates from '../components/Cates.vue';
import { userinfo } from '@/stores/counter';
import SubNewsList from '../components/SubNewsList.vue';
import { ref, inject, onMounted, onBeforeMount } from 'vue';
import type { Cate } from '../types/types.d.ts';
// import getSubArticleList from '@/api/getSubArticleList';
import { useRoute, useRouter } from 'vue-router';
import subscribeCate from '@/api/subscribeCate';
import articleStar from '@/api/articleStar';
const { getSubscribeStatus, setSubscribeStatus, getSubscribeList } =
  subscribeCate();
const { getFavArticle } = articleStar();
const route = useRoute();
const router = useRouter();
const user = userinfo();
const loading = ref(false);

onBeforeMount(async () => {});
</script>

<template>
  <div class="sub-div">
    <div class="sub-title font-xbs">个人中心</div>
    <div class="news-line font-xbs"></div>
    <img
      src="/assets/imgs/arrow.png"
      class="news-arrow unselectable"
      alt=""
      style="height: 20px"
    />
    <div class="sub-newp">
      <div class="avatar-container">
        <img :src="user.baseInfo.avator" alt="User Avatar" class="avatar-img" />
      </div>

      <div class="user-info">
        <div class="info-row">
          <div class="info-item">
            <el-icon size="25" color="#f5900a">
              <User />
            </el-icon>
            <span style="font-size: 20px">{{ user.baseInfo.username }}</span>
          </div>
          <div class="info-item">
            <el-icon size="25" color="#f5900a">
              <!-- Update size and color here -->
              <Iphone />
            </el-icon>
            <span style="font-size: 20px">{{ user.baseInfo.telephone }}</span>
            <!-- Increase font size here -->
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <el-icon size="25" color="#f5900a">
              <!-- Update size and color here -->
              <Female v-if="user.baseInfo.sex == '女'" /> <Male v-else />
            </el-icon>
            <span style="font-size: 20px">{{ user.baseInfo.sex }}</span>
            <!-- Increase font size here -->
          </div>
          <div class="info-item">
            <el-icon size="25" color="#f5900a">
              <!-- Update size and color here -->
              <Message />
            </el-icon>
            <span style="font-size: 20px">{{ user.baseInfo.mail }}</span>
            <!-- Increase font size here -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sub-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.news-line {
  margin-top: 20px;
  height: 1px;
  background-color: #fbdcbe;
  width: 50%;
}
.news-arrow {
  margin-top: 30px;
}
.sub-title {
  font-size: 40px;
  font-weight: bold;
}

.sub-newp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 500px;
  /* margin-bottom: 20px;  */
}

/* 可以根据需要调整每个子元素的样式，比如添加 margin 等 */
.sub-newp > div {
  margin-bottom: 50px;
}

.avatar-container {
  width: 150px; /* 调整头像容器的宽度 */
  height: 150px; /* 正方形格子 */
  overflow: hidden;
  border-radius: 50%; /* 圆形头像，如果需要的话 */
  border: #f5900a 3px solid;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
}

.user-info {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(500px, 1fr)
  ); /* 自动填充，每列最小宽度300px */
  grid-gap: 74px; /* 设置网格之间的间距 */
  margin-left: 20px; /* 调整头像与用户信息之间的间距 */
}

.info-row {
  display: flex;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-item i.el-icon {
  /* margin-right: 20px;  */
  border-radius: 50%;
  border: #f5900a 1px solid;
}

.info-item span {
  border-bottom: #f5900a 3px solid;
  border-radius: 5px;
  font-size: 20px;
  padding: 5px;
  /*color: #f5900a;  Set the color to match the icon */
}
</style>
